<!-- 自定义标准图表 设置百分百宽度 通过平台组件来适配尺寸 可以替换数据以及设置高级属性自定义扩展 详细查看组件示例.txt
  注:如需设置图片存放文件夹名称需应与当前文件名一致(1并在aircim.webpack.build.component.config.js配置需要打包的文件 2.npm run lib_c 执行打包命令  最后的组件会打包在components/grids中)-->
<template>
  <div
    class="grid-box animate__animated"
    :class="dynamicClassName"
    :style="backgroundStyle"
  >
    <!-- 设置交互方法 -->
    <div
      class="grid-charts"
      ref="chartsRef"
      @click="clickFn()"
      @dblclick="dblclickFn()"
      @mouseenter="mouseenterFn()"
      @mouseleave="mouseleaveFn()"
    ></div>
  </div>
</template>
<script>
//引入echarts图表
import echarts from "echarts";
//引入封装方法
import encapsulation from "../utils/aircimGird";

export default {
  //混入封装方法
  mixins: [encapsulation],
  data() {
    return {
      //图表内容
      echartdata: {
        title: "课时统计TEST",
        legendData: ["课时"],
        xData: [
          "2019-01",
          "2019-02",
          "2019-03",
          "2019-04",
          "2019-05",
          "2019-06",
        ],
        yData: [23, 60, 20, 36, 23, 85],
      },
      //图表样式  (样式可选配 这个主要是适配平台做细微属性修改 如不需要 只保留这个 echartsConfigData对象 里面字段清空(echarts图表中正常书写颜色或者数字属性)  并且在refreshConfig分配属性的对应字段也清除或者注释)
      echartsConfigData: {
        //标题样式
        textStyle: {
          color: "#fff",
          fontSize: 32,
        },
        // x显示
        xShow: true,
        // x颜色
        xColor: "#fff",
        // x字体
        xWeight: "24",
        // y显示
        yShow: true,
        // y颜色
        yColor: "#fff",
        // y字体
        yWeight: "24",
        // 图例显示
        legendShow: true,
        // 图例颜色
        legendColor: "#fff",
        // 图例字体
        legendWeight: "18",
        // 图表底板颜色
        linerColor: "rgba(255,255,255,0)",
        // 是否隐藏底框
        hideBottomFrame: false,
        //定义线条颜色 (可忽略不用)
        chartType: "折线图-1",
        chartDataColor1: "#A9F387",
      },
      //监听尺寸变化
      resizeObserver: null,
      //图表实例
      mychart: null,
    };
  },
  methods: {
    myEcharts() {
      this.mychart = echarts.init(this.$refs.chartsRef);

      let option = {
        title: {
          text: this.echartdata.title,
          textStyle: this.echartsConfigData.textStyle,
          left: 10,
          top: "2%",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            label: {
              show: false,
            },
          },
        },
        grid: {
          top: "60%",   //---------------------------------------导致两个图表不一样
          left: 35,
          right: 45,
          bottom: 15, //也可设置left和right设置距离来控制图表的大小
          containLabel: true,
        },
        // 图例
        legend: {
          data: this.echartdata.legendData,
          top: "13%",
          show: this.echartsConfigData.legendShow,
          itemWidth: 20,
          textStyle: {
            color: this.echartsConfigData.legendColor,
            fontSize: this.echartsConfigData.legendWeight,
          },
        },

        xAxis: [
          {
            data: this.echartdata.xData,
            axisLine: {
              lineStyle: {
                show: false,
              },
            },
            axisLabel: {
              show: this.echartsConfigData.xShow,
              rotate: 0,
              textStyle: {
                padding: [14, 0, 0, 0],
                fontSize: this.echartsConfigData.xWeight,
                color: this.echartsConfigData.xColor,
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            splitNumber: 4,
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "rgba(255,255,255,0.1)",
              },
            },
            axisLine: {
              show: false,
            },
            nameTextStyle: {
              show: false,
            },
            splitArea: {
              show: false,
            },
            axisLabel: {
              show: this.echartsConfigData.yShow,
              textStyle: {
                color: this.echartsConfigData.yColor,
                fontSize: this.echartsConfigData.yWeight,
              },
            },
          },
        ],
        series: [
          {
            name: this.echartdata.legendData[0],
            type: "line",
            smooth: true, //平滑曲线显示
            showAllSymbol: true, //显示所有图形。
            symbol: "circle", //标记的图形为实心圆 关联图例样式
            symbolSize: 10, //标记的大小
            itemStyle: {
              color: this.echartsConfigData.chartDataColor1,
            },
            lineStyle: {
              color: this.echartsConfigData.chartDataColor1,
            },
            data: this.echartdata.yData,
          },
        ],
      };
      this.mychart.setOption(option);
      this.mychart.resize();
    },

    //最后如果需要上传可视化能力平台 填写的图表内容 以及 图表样式 应如
    //图表内容: {"echartdata":{"title":"课时统计TEST","legendData":["课时"],"yData":[23,60,20,36,23,85],"xData":["2019-01 ","2019-02 ","2019-03 ","2019-04 ","2019-05 ","2019-06"]}}
    //图表样式: {"xShow":true,"xColor":"#fff","xWeight":24,"yShow":true,"yColor":"#fff","yWeight":24,"legendShow":true,"legendColor":"#fff","legendWeight":18,"chartType":"折线图-1","chartDataColor1":"#A9F387","textStyle":{"color":"#fff","fontSize":32},"linerColor":"rgba(255,255,255,0)","hideBottomFrame":false}

    // 刷新数据源
    refreshData(val) {
      this.echartdata = val.echartdata;
    },
    // 初始化
    initGrid() {
      this.myEcharts();
    },
    // 样式修改方法
    refreshConfig(val) {
      const {
        xShow,
        yShow,
        legendShow,
        xColor,
        yColor,
        legendColor,
        legendWeight,
        xWeight,
        yWeight,
        chartDataColor1,
        textStyle,
        linerColor,
        hideBottomFrame,
      } = val;
      this.echartsConfigData.xShow = xShow;
      this.echartsConfigData.yShow = yShow;
      this.echartsConfigData.legendShow = legendShow;
      this.echartsConfigData.xColor = xColor;
      this.echartsConfigData.yColor = yColor;
      this.echartsConfigData.legendColor = legendColor;
      this.echartsConfigData.legendWeight = legendWeight;
      this.echartsConfigData.xWeight = xWeight;
      this.echartsConfigData.yWeight = yWeight;
      this.echartsConfigData.chartDataColor1 = chartDataColor1;
      this.echartsConfigData.textStyle = textStyle;
      this.echartsConfigData.linerColor = linerColor;
      this.echartsConfigData.hideBottomFrame = hideBottomFrame;
    },

    // 监听盒子变化
    listenChangeFn() {
      // 添加 resize 事件监听器
      // 获取目标 div 元素
      const targetDiv = this.$refs.chartsRef;

      // 创建 ResizeObserver 实例
      this.resizeObserver = new ResizeObserver((entries) => {
        // 当目标 div 大小发生变化时，触发回调函数
        for (const entry of entries) {
          const { width, height } = entry.contentRect;
          this.mychart.resize(); //图表自适应方法
        }
      });

      // 监听目标 div 元素
      this.resizeObserver.observe(targetDiv);
    },
  },
  computed: {
    //设置套系边框(根据主题切换底色边框样式) 以及设置图表背景颜色
    backgroundStyle() {
      const { hideBottomFrame, linerColor } = this.echartsConfigData;
      let styleObject = {
        "background-color": linerColor,
      };
      // 如果 hideBottomFrame 不为 true，则添加 background-image
      if (!hideBottomFrame) {
        styleObject['background-image'] = `url("thumbnail/backImg/border-${this.$store.state.topicColor}.png")`;
      }
      return styleObject;
    },
  },
  mounted() {
    this.myEcharts();  //图表初始化
    this.listenChangeFn();  //监听盒子变化
  },
  // 销毁监听
  beforeDestroy() {
    // 组件销毁前停止监听
    if (this.resizeObserver) {
      this.resizeObserver.disconnect();
    }
    if (this.requestTime != null) {
      clearInterval(this.requestTime);
    }
  },
};
</script>
<style lang="scss" scoped>
.grid-box {
  width: 100%;
  height: 100%;
  position: absolute;
  padding: 10px 10px 15px 10px;
  box-sizing: border-box;
  overflow: hidden;
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .grid-charts {
    width: 100%;
    height: 100%;
  }
}
</style>
